<template>
  <a-modal
    :title="title"
    :visible="open"
    @ok="submitForm"
    @cancel="cancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item label="主服务部门" prop="deptId">
        <a-select placeholder="请选择"  v-model="form.deptId">
          <a-select-option v-for="(d, index) in deptOptions" :key="index" :value="d.deptId">
            {{ d.deptName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
  import { authMainDept } from '@/api/system/user'
  import { selectDeptByUserId } from '@/api/system/dept'

  export default {
    name: 'EditMainDept',
    props: {
    },
    data () {
      return {
        title: '设置主部门',
        open: false,
        childrenDrawer: false,
        formLayout: 'horizontal',
        form: {

        },
        // 部门列表
        deptOptions: [],
        rules: {
          deptId: [
            { required: true, message: '主部门不能为空', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
      // 取消按钮
      cancel () {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset () {
        this.form = {
          userId: undefined
        }
      },
      editMainDept (row) {
        this.form = {
          userId: row.userId,
          deptId: row.dept.deptId
        }
        selectDeptByUserId(row.userId).then(response => {
          this.deptOptions = response.data
        })
        this.open = true
      },
      /** 保存按钮操作 */
      submitForm: function () {
        this.$refs.form.validate(valid => {
          if (valid) {
            authMainDept(this.form).then(response => {
              this.$message.success(
                '修改成功',
                3
              )
              // this.$emit('ok')
              this.open = false
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
